<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>
<link rel="stylesheet" href="css/jquery-ui.css"/>

<link href="css/city-picker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jquery-impromptu.min.css" type="text/css"/>
<link rel="stylesheet" href="css/combo.select.css" type="text/css"/>
<body>
    <div id="dataLoad" style="display:none; position: fixed; width: 100%; top: 20%; z-index: 1001;">
           <table width=100% height=100% border=0 align=center valign=middle>
            <tr height=50%><td align=center>&nbsp;</td></tr>
            <tr><td align=center><img src="images/loading.gif"/></td></tr>
            <tr><td align=center id="loading_text">获取中，请稍后......</td></tr>
            <tr height=50%><td align=center>&nbsp;</td></tr>
           </table>
    </div>
    <div id="search_bar" class="mt10">
        <div class="box">
            <div class="box_border">
                <div class="box_top"><b class="pl15">数据筛选</b></div>
                <div class="box_center pt10 pb10" style="padding-left: 35%;">
                    <table class="form_table" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="section_area">部门选择</td>
                            <td class="section_area">
                                    <span class="fl">
                                        <div class="select_border">
                                            <div class="select_containers ">
                                                <select name="" class="select" id="section_type">

                                                </select>
                                            </div>
                                        </div>
                                    </span>
                            </td>
                            <td>姓名</td>
                            <td><input type="text" name="name" class="input-text lh25" size="10"></td>
                            <td>借款单号</td>
                            <td><input type="text" name="loan_fee_id" class="input-text lh25" size="20"></td>
                            <td><input type="button" value="确定" id="confirm_query" class="ext_btn ext_btn_submit"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="mt10">
        <div class="box">
            <div class="box_border">
                <div class="box_top"><b class="pl15">报销费用信息</b></div>
                <div class="mt10">
                    <div id="table" class="mt10">
                        <div class="box span10 oh" style="margin-left: auto; margin-right: auto">
                            <table id="ordinary_fee" width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table" style="table-layout:fixed; font-size:1.1rem;">
                                <tr>
                                    <th class="td_center" style="width:10%">编号</th>
                                    <th class="td_center" style="width:15%">申请人</th>
                                    <th class="td_center" style="width:15%">所属部门</th>
                                    <th class="td_center" style="width:15%">预借金额</th>
                                    <th class="td_center" style="width:15%">已还金额</th>
                                    <th class="td_center" style="width:15%">申请时间</th>
                                    <th class="td_center" style="width:15%">可选操作</th>
                                </tr>
                            </table>
                            <div class="page mt10">
                                <div class="pagination">
                                    <ul>
                                        <li class="first-child" ><a href="#" id="firstPage">首页</a></li>
                                        <li class="" ><a href="#" id="prevPage">上一页</a></li>
                                        <li class="" ><a href="#" id="nextPage">下一页</a></li>
                                        <li class="last-child " ><a href="#" id="endPage">末页</a></li>
                                        <li class="disabled pagedata" id="page1"><a id="pageInfo">1/20</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/jquery-impromptu.min.js"></script>
<script src="js/jquery.combo.select.js" type="text/javascript"></script>
<script>

    //全局函数，获取当前数据
    var curInfo;

    var firstSet = true;

    //辅助函数，获取部门
    function getSection(){
        $('#section_type').empty();

        $('#section_type').append("<option value='0'>全部</option>");

        $.get(url + '/Common/GetSection.php', function(result){
            var t = JSON.parse(result);

            for(var i = 0; i < t.length; i++){
                var id = t[i]['section_id'];
                var name = t[i]['section_name'];
                $('#section_type').append("<option value='"+id+"'>" + name + "</option>");
            }
            $('#section_type').comboSelect();
        });

    }

    //辅助函数，获取差旅报销信息
    function getLoanFeeData(){
        curPage = 0;
        var section = $('#section_type').val();
        var user = $("input[name='name']").val();
        var loan_id = $("input[name='loan_fee_id']").val();
        $('#dataLoad').show();
        $.post(url + 'LoanFee/GetFinanceLoanFee.php', {'sectionID': section, 'loan_id':loan_id, 'username':user}, function(data){
            $('#dataLoad').hide();
            console.log(data);
            var t = JSON.parse(data);
            if(t.state == 1){
                if(firstSet){
                    createTablePage(t.totalCount);
                    firstSet = false;
                }

                curInfo = t.data;
                showLoanFeeTable(t.data);
            }
            else{
                $.prompt( "<h3>网络或数据库错误，请稍后再试</h3>",{
                    title: '消息提醒',
                    buttons: {'确定': true}
                });
            }
        })
    }

    //辅助函数，处理差旅报销表格的显示
    function showLoanFeeTable(){
        $(".info_tr").empty();
        var info = curInfo;
        var start = (curPage-1) * rowPerPage;
        var end = (info.length - start)> rowPerPage ? rowPerPage : info.length;

        for(var i = start; i < end; i++){
            $('#ordinary_fee').append(
                    "<tr class='tr info_tr'>" +
                    "<td class='td_center'>" + (i + 1) + "</td>" +
                    "<td class='td_center'>" + info[i].user_name + "</td>" +
                    "<td class='td_center'>" + info[i].section_name + "</td>" +
                    "<td class='td_center'>" + info[i].loan_money + "</td>" +
                    "<td class='td_center'>" + info[i].return_money + "</td>" +
                    "<td class='td_center'>" + info[i].app_time + "</td>" +
                    "<td class='td_center'>" +
                    "<a class='ext_btn fuhe btn_fuhe'><span class='fuhe'></span>核销</a>" +
                    "</td>" +
                    "</tr>");
        }

        $('.fuhe').each(function(index, elem){
            $(this).click(function(){
                var id = $(this).parent().parent().children('td').eq(0).html();
                processLoanFeeApprove(info[id-1].app_id);

            })
        })
    }

    //辅助函数，用于处理借款审批
    function processLoanFeeApprove(id){
        $('#dataLoad').show();
        $.post(url + 'LoanFee/GetOrdinaryLoanFeeByID.php', {'appID' : id}, function(data){
            $('#dataLoad').hide();

            var t = JSON.parse(data);
            if(t.state == 1){
                window.localStorage.setItem('curItem', data);
                window.localStorage.setItem('approve_state', 4);
                jumpPage('loan_fee_info.html');
            }
            else{
                $.prompt("<h3>网络或数据库故障，请稍后再试</h3>", {
                    title: '错误提醒',
                    buttons: {'确定': true},
                })
            }
        })
    }

    $(function(){
        getSection();
        getLoanFeeData();
        $('#confirm_query').click(function(){
            firstSet = true;
            getLoanFeeData();
        });
        clickFirstPage(showLoanFeeTable);
        clickEndPage(showLoanFeeTable);
        clickNextPage(showLoanFeeTable);
        clickPrevPage(showLoanFeeTable);
    })


    </script>
</html>